<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <form>
        <p>姓名：<input type="text" v-model="username"></p>
        <p>城市：
            <select v-model.number="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">大连</option>
                <option value="4">无锡</option>
                <option value="5">南白滩</option>
            </select>
        </p>
        <p>性别：
            <input v-model="sex" type="radio" :value="1">男
            <input v-model="sex" type="radio" :value="2">女
        </p>
        <p>爱好：
            <input v-model.number="hobby"  type="checkbox" value="1">编程
            <input v-model.number="hobby"  type="checkbox" value="2">学习
            <input v-model.number="hobby"  type="checkbox" value="3">丰满
            <input v-model.number="hobby"  type="checkbox" value="4">足球
        </p>
        <button @click.prevent="submitHandler">提交</button>
    </form>
</div>
</body>
<script>
    // 表单相关：
    // 1- 如何设置表单的初始值
    // 2- 如何收集最新的表单数据
    new Vue({
        el: "#root",
        data: {
            username: "zhangsan",
            city:2,
            sex:1,
            hobby:[1,2,3]
        },
        methods: {
            submitHandler() {
                console.log("username:", this.username);
                console.log("city:", this.city);
                console.log("sex:", this.sex);
                console.log("hobby:", this.hobby);
            }
        }
    })
</script>
</html>